<template>
  <div class="">
    <div>
  <!-- 快递信息 -->
      <div class="logistics_des">
        <!-- 完成状态 -->
        <div class="flex-center logistics_des_item" v-if="data.order_status==2 || data.order_status==3">
          <img class="img_box" :src="img.wl" alt="">
          <div class="des">
            <p>
              快件已在深圳市【深圳龙华利浦分部】签收，签收人：本人
          </p>
            <p>2018-07-26 13:47:36</p>
          </div>

        </div>
        <div v-else class="desc_name">
            {{data.status_name}}
        </div>
        <!-- 收货人 -->
        <div class="flex-center logistics_des_item w">
          <img class="img_box" :src="img.dw" alt="">
          <div class="des">
            <p>
              收货人：{{data.name}}
          </p>
            <p>收货地址：{{data.address	}}</p>
          </div>

        </div>
      </div>
  <!-- 商品卡片 -->
  <div class="order-box w" v-if="goods&&goods.length>0">
    <van-card
    :num="goods[0].goods_num"
    :price="goods[0].goods_price"
    :title="goods[0].goods_name"
    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
  />
    
  </div>
  <!-- 订单信息 -->
  <div class="order-text w" >
    <ul class="order-text-box">
      <li><span>订单编号:</span>{{data.order_sn}}</li>
      <li><span>下单时间:</span>{{data.create_time}}</li>
      <li><span>支付方式:</span>{{data.pay_type==1?'余额支付':(data.pay_type==2?'微信':'支付宝')}}</li>
      <li v-if="data.track_num"><span>快递单号:</span>{{data.track_num}}</li>
      <li><span>备注:</span>{{data.remark || '无'}}</li>
    </ul>

  </div>
  <!-- 联系客服 -->
  <div class="flex-be-center service_box w">
      <a href="" class="service_box_img">
        <img :src="img.kf" alt="">
        <span>联系客服</span> 
      </a>
      <div class="order_box_btn">
        <a href="active" class="active" v-if="data.order_status==3">申请售后</a>
        <a href="active" class="active" v-if="data.order_status==3">立即评价</a>
      </div>

  </div>

    </div>

  </div>
  
</template>
<style lang="" scoped>
  .desc_name{
    height:1.5rem;line-height: 1.5rem;
    text-align: center;
    background: rgba(186, 22, 1, 1);
    color:#ffffff!important;
  }
  /* 快递信息 */
  .logistics_des{
    margin-top: 0.29rem;
    margin-bottom: 0.32rem;
  }

  .logistics_des_item{
    font-size:0.24rem;
  color: #333333;
  line-height:0.39rem;

  }
  .logistics_des_item .img_box{
margin-right: 0.29rem;
width: 0.33rem;
height: 0.27rem;
  }
  .logistics_des_item .des{
    width:4.87rem;
    margin-bottom: 0.21rem;
    margin-top: 0.27rem;
  }
  .logistics_des div:nth-child(1){
    color:rgba(216,30,6,1);
border-bottom: 0.02rem solid rgba(234,234,234,1);;
  }
  .logistics_des div:nth-child(2) .img_box{
    width: 0.26rem;
    height: 0.34rem;
  }
  /* 订单信息 */
  .order-text-box{
    margin-top: 0.28rem;
   
    border-bottom: 0.02rem solid rgba(234,234,234,1);;
  }
  .order-text-box li{
    margin-bottom: 0.28rem;
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  line-height:0.6rem;
  }
  .order-text-box li span{
    display: inline-block;
    min-width: 1.12rem;
    margin-right: 0.32rem;
  }
  /* 联系客服 */
  .service_box{
padding:  0.18rem 0;
  }
  .service_box_img{
    display: flex;
    align-items: center;
  }
  .service_box_img img{
    width: 0.47rem;
    height: 0.52rem;
    margin-right: 0.19rem;
  }


</style>

<script>
    import getData from '@/assets/js/axios.js'
  export default{
    data () {
      return {
        img:{
          wl:require("../../assets/img/orderdes/wl.png"),
          dw:require("../../assets/img/orderdes/dw.png"),
          kf:require("../../assets/img/orderdes/kf.png")
        },
        data:{},
        goods:[]
      }
    },
    mounted () {
      this.$route;
      console.log(this.$route.query.id);
      var para={
        id:this.$route.query.id  //120
      }
      getData.odDet(para).then(res=>{
          res.data.data.goods.map(item=>{
            item.goods_price = Number(item.goods_price).toFixed(2)
          })
          this.data = res.data.data
          this.goods = res.data.data.goods
      }).catch(err=>{

      })

    }
  }
</script>